<template>
  <view class="viewport">
    <!-- 地址信息 -->
    <view class="form">
      <view class="form-item">
        <text class="label">姓名</text>
        <input
          v-model="form.receiver"
          placeholder-style="color: #888"
          placeholder="请填写收货人姓名" />
      </view>
      <view class="form-item">
        <text class="label">手机号码</text>
        <input
          v-model="form.contact"
          placeholder-style="color: #888"
          placeholder="请填写收货人手机号码" />
      </view>
      <view class="form-item">
        <text class="label">省/市/县 (区)</text>
        <picker
          @change="regionChange"
          mode="region">
          <view
            v-if="form.fullLocation"
            class="region">
            {{ form.fullLocation }}
          </view>
          <view
            v-else
            class="placeholder">
            请填写收货人所在城市
          </view>
        </picker>
      </view>
      <view class="form-item">
        <text class="label">详细地址</text>
        <input
          v-model="form.address"
          placeholder-style="color: #888"
          placeholder="街道、楼牌号信息" />
      </view>
      <view class="form-item">
        <text class="label">设置默认地址</text>
        <switch
          @change="isDefaultChange"
          :checked="form.isDefault === 1"
          color="#27ba9b" />
      </view>
    </view>
    <!-- 提交按钮 -->
    <view
      class="button"
      @tap="submitFrom">
      保 存
    </view>
  </view>
</template>
<script>
// 导入 validate对象
import Schema from 'validate'
import { addMemberAddress, getMemberAddressDetail, putMemberAddress } from '@/http/user'
export default {
  data() {
    return {
      form: {
        /**
         * 详细地址
         */
        address: '',
        /**
         * 地址标签,以英文逗号分割
         */
        addressTags: '',
        /**
         * 所在城市编码
         */
        cityCode: '',
        /**
         * 联系方式
         */
        contact: '',
        /**
         * 所在区/县编码
         */
        countyCode: '',
        /**
         * 是否为默认，1为是，0为否
         */
        isDefault: 0,
        /**
         * 邮政编码
         */
        postalCode: '',
        /**
         * 所在省份编码
         */
        provinceCode: '',
        /**
         * 收货人姓名
         */
        receiver: '',
        fullLocation: ''
      }
    }
  },
  onLoad({ id }) {
    if (id) {
      this.currentId = id
      uni.setNavigationBarTitle({ title: '编辑地址' })
      console.log('bj', id)
      getMemberAddressDetail(id).then((res) => {
        this.form = res.result
      })
    } else {
      console.log('xz', id)
    }
  },
  methods: {
    regionChange(e) {
      console.log(e)
      this.form.fullLocation = e.detail.value.join('')
      this.form.addressTags = e.detail.value.join(',')
      this.form.postalCode = e.detail.postcode
      this.form.provinceCode = e.detail.code[0]
      this.form.countyCode = e.detail.code[1]
      this.form.cityCode = e.detail.code[2]
    },
    isDefaultChange(e) {
      console.log(e)
      this.form.isDefault = Number(e.detail.value)
    },
    // 提交地址
    submitFrom() {
      // 新建表单校验对象
      const addressRule = new Schema({
        // 姓名
        receiver: {
          required: true,
          message: {
            required: '请输入收货人姓名'
          }
        },
        // 手机号码
        contact: {
          required: true,
          // 指定规则 正则
          match: /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/,
          message: {
            required: '请输入手机号码',
            match: '请输入合法的手机号码'
          }
        },
        // 地址编码
        provinceCode: {
          required: true,
          message: '请选择省份'
        },
        cityCode: {
          required: true,
          message: '请选择城市'
        },
        countyCode: {
          required: true,
          message: '请选择区/县'
        },
        // 详细地址
        address: {
          required: true,
          message: '请输入详细地址'
        }
      })

      // 开始验证
      const errorList = addressRule.validate({ ...this.form })
      // console.log(errorList);
      // 友好的弹窗 提示用户
      if (errorList[0]) {
        uni.showToast({ title: errorList[0].message, icon: 'none' })
        return // 返回
      }

      // 通过以上的校验 表示没错  正常往下 执行业务
      console.log('正常执行业务')
      if (this.currentId) {
        putMemberAddress(this.form).then((res) => {
          console.log(res)
          uni.showToast({ title: '新增成功' })
          setTimeout(() => {
            uni.navigateBack()
          }, 1500)
        })
      } else {
        addMemberAddress(this.form).then((res) => {
          console.log(res)
          // 成功  弹出提示  返回上一页 ！！
          uni.showToast({ title: '新增成功' })
          setTimeout(() => {
            uni.navigateBack()
          }, 1500)
        })
      }
    }
  }
}
</script>
<style lang="scss">
page {
  background-color: #f4f4f4;
}
.form {
  margin: 20rpx 20rpx 0;
  padding: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;
  .form-item {
    display: flex;
    min-height: 96rpx;
    line-height: 46rpx;
    padding: 25rpx 10rpx;
    background-color: #fff;
    font-size: 28rpx;
    border-bottom: 1rpx solid #ddd;
    position: relative;
    &:last-child {
      border: none;
    }
    .label {
      width: 200rpx;
      color: #333;
    }
    input {
      flex: 1;
      display: block;
      height: 46rpx;
    }
    switch {
      position: absolute;
      right: -10rpx;
      transform: scale(0.7) translateY(-8px);
    }
    picker {
      flex: 1;
    }
    .region {
      color: #333;
    }
    .placeholder {
      color: #888;
    }
  }
}
.button {
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  margin: 30rpx 20rpx;
  color: #fff;
  border-radius: 80rpx;
  font-size: 30rpx;
  background-color: #27ba9b;
}
</style>
